<!--添加任务-->
<template>
    <div>
        <page-header :title="page_head" :content="page_head_eng" />        <page-main>
            <h1>
                <el-page-header content="编辑:"  @back="goBack" />
            </h1>
        </page-main>
        <page-main>
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                         label-position="right"
                >
                    <el-col :span="24">
                        <h1>消息类型:<b :class="task_show?'message_type1':'message_type2'">{{ messageType }}</b></h1>
                    </el-col>
                    <el-col :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                        <el-form-item label="接收人类型：" prop="field102" label-width="120px">
                            <el-select v-model="formData.receiver_type" placeholder="请选择接收人类型：" clearable :style="{width: '100%'}" @change="change_receiver_type">
                                <el-option v-for="(item, index) in field102Options" :key="index" :label="item.label"
                                           :value="item.value" :disabled="item.disabled"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <div v-if="student_type">
                        <el-col :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="院系部门：" prop="department_id">
                                <el-select v-model="formData.department_id" placeholder="请选择院系部门：" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in field105Options" :key="index" :label="item.department_name"
                                               :value="item.id" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="年级：" prop="grade" label-width="70px">
                                <el-select v-model="formData.grade" placeholder="请选择年级：" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in field104Options" :key="index" :label="item.label"
                                               :value="item.value" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </div>
                    <div v-if="teacher_type">
                        <el-col :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="接收标志类型：" prop="receive_sign_type" label-width="150px">
                                <el-select v-model="formData.receive_sign_type" placeholder="请选择接收标志类型：" clearable :style="{width: '100%'}" @change="change_teacher_type">
                                    <el-option v-for="(item, index) in field108Options" :key="index" :label="item.label"
                                               :value="item.value" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="post_type" :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="职务：" prop="post_id">
                                <el-select v-model="formData.post_id" placeholder="请选择院系部门：" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in field106Options" :key="index" :label="item.post_name"
                                               :value="item.id" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="professional_title_type" :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="职称：" prop="professional_title">
                                <el-select v-model="formData.professional_title" placeholder="请选择院系部门：" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in field107Options" :key="index" :label="item.professional_title_name"
                                               :value="item.id" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="department_type" :xs="24" :sm="15" :md="10" :lg="10" :xl="5">
                            <el-form-item label="院系部门：" prop="department_id">
                                <el-select v-model="formData.department_id" placeholder="请选择院系部门：" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in field105Options" :key="index" :label="item.department_name"
                                               :value="item.id" :disabled="item.disabled"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </div>
                    <div>
                        <el-alert
                            title="1.不支持TAB键增加文本缩进，如有需要请手动点击缩进操作"
                            type="warning"
                        />
                        <el-alert
                            title="2.字数统计只统计汉字和单词数量，数字和符号不予以统计"
                            type="warning"
                        />
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <h1>编辑：</h1>
                            <el-form class="center">
                                <el-form-item label="标题">
                                    <el-input v-model="formData.message_title" />
                                </el-form-item>
                                <editor v-model="formData.message_detail" />
                            </el-form>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <h1>预览：</h1>
                            <el-card class="box-card" shadow="always">
                                <!--标题预览-->
                                <h2 style="text-align: center;">{{ formData.message_title }}</h2>
                            </el-card>
                            <el-card class="box-card" shadow="always">
                                <!--内容详情预览-->
                                <h2>内容详情：</h2>
                                <div class="preview" v-html="formData.message_detail" />
                            </el-card>
                        </el-col>
                    </div>
                    <el-col :span="20" style="text-align: center; margin: 30px;">
                        <el-form-item size="large">
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </page-main>
    </div>
</template>
<script>
import PageMain from '../../components/PageMain/index'
import api from '@/api'
import {Message} from 'element-ui'
export default {
    name: 'add.task',
    components: {PageMain},
    props: [],
    data() {
        return {
            formData: {
                message_detail: null,
                message_title: null,
                receiver_type: '学生',
                department_id: null,
                grade: null,
                post_id: null,
                professional_title: null,
                receive_sign_type: null,
                time: null,
                message_type: null
            },
            rules: {
                receiver_type: [{
                    required: true,
                    message: '请选择接收人类型：',
                    trigger: 'change'
                }],
                department_id: [{
                    required: true,
                    message: '请选择院系部门：',
                    trigger: 'change'
                }],
                grade: [{
                    required: true,
                    message: '请选择年级：',
                    trigger: 'change'
                }],
                receive_sign_type: [{
                    required: true,
                    message: '请选择接收标志类型：',
                    trigger: 'change'
                }],
                post_name: [{
                    required: true,
                    message: '请选择具体职务：',
                    trigger: 'change'
                }],
                professional_title: [{
                    required: true,
                    message: '请选择具体职称：',
                    trigger: 'change'
                }],
                message_title: [{
                    required: true,
                    message: '请填写标题：',
                    trigger: 'change'
                }],
                message_detail: [{
                    required: true,
                    message: '请选择详情：',
                    trigger: 'change'
                }]
            },
            field102Options: [{
                'label': '教师',
                'value': '教师'
            }, {
                'label': '学生',
                'value': '学生'
            }],
            field105Options: [{
            }],
            field104Options: [{
                'label': '所有年级的学生',
                'value': '所有年级的学生'
            }, {
                'label': '大一',
                'value': '大一'
            }, {
                'label': '大二',
                'value': '大二'
            }, {
                'label': '大三',
                'value': '大三'
            }, {
                'label': '大四',
                'value': '大四'
            }],
            field106Options: [{}],
            field107Options: [{}],
            field108Options: [{
                'label': '全体教师',
                'value': '全体教师'
            }, {
                'label': '职务',
                'value': '职务'
            }, {
                'label': '院系部门',
                'value': '院系部门'
            }, {
                'label': '职称',
                'value': '职称'
            }],
            student_type: true,
            teacher_type: false,
            post_type: false,
            professional_title_type: false,
            department_type: false,

            page_head: null,
            page_head_eng: null,
            task_show: false,
            messageType: null
        }
    },
    computed: {},
    watch: {},
    created() {
        // 接收下拉选择器的基础信息
        var _this = this
        api.post('other/receiverBase')
            .then(res => {
                _this.field105Options = res.data['department']
                _this.field106Options = res.data['post']
                _this.field107Options = res.data['professionalTitle']
                _this.department_id = res.data['department'][0].id
            })
        this.formData.message_type = this.$route.query.message_type
        if (this.formData.message_type == null) {
            this.$router.push({path: '/school/publish_message'})
        }
        // 通过判断传入的消息类型来决定页头内容,以及决定是否渲染“任务”相关的组件
        if (this.formData.message_type == 'task') {
            this.page_head = '添加任务'
            this.page_head_eng = 'Add task'
            this.task_show = true
            this.messageType = '任务'
        } else if (this.formData.message_type == 'notice') {
            this.page_head = '添加通知'
            this.page_head_eng = 'Add notice'
            this.task_show = false
            this.messageType = '通知'
        } else {
            this.page_head = null
            this.page_head_eng = null
            this.task_show = false
            this.messageType = null
        }
    },
    mounted() {},
    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单

                this.formData.time = new Date().toLocaleString('chinese', {hour12: false})
                this.$confirm('是否确认发布消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    if (this.formData.message_title == null || this.formData.message_detail == null) {
                        Message.error('请填写“标题”或“消息详情”')
                        return
                    }
                    // 提交消息给后端
                    api.post('schoolMessage/addMessage', {
                        data: this.formData, account: this.$store.state.user.account})
                        .then(res => {
                            Message.success(res.msg)
                            // 跳转路径
                            this.$router.push({path: '/school/manage_message'})
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发布'
                    })
                })

            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
            this.$message({
                type: 'info',
                message: '已重置接收人信息'
            })
        },
        // 根据接收人类型判断渲染哪个组件
        change_receiver_type() {
            if (this.formData.receiver_type == '学生') {
                this.student_type = true
                this.teacher_type = false
            } else if (this.formData.receiver_type == '教师') {
                this.student_type = false
                this.teacher_type = true
            } else {
                this.student_type = false
                this.teacher_type = false
            }
        },
        change_teacher_type() {
            this.formData.post_id = null
            this.formData.professional_title = null
            this.formData.department_id = null
            if (this.formData.receive_sign_type == '全体教师') {
                this.post_type = false
                this.professional_title_type = false
                this.department_type = false
            } else if (this.formData.receive_sign_type == '职务') {
                this.post_type = true
                this.professional_title_type = false
                this.department_type = false
            } else if (this.formData.receive_sign_type == '职称') {
                this.post_type = false
                this.professional_title_type = true
                this.department_type = false
            } else if (this.formData.receive_sign_type == '院系部门') {

                this.post_type = false
                this.professional_title_type = false
                this.department_type = true
            }
        },
        goBack() {
            this.$router.push('/school/publish_message')
        }
    }
}

</script>
<style lang="scss" scoped>
    .preview {
        margin-top: 10px;
        // 支持数字和字母换行
        word-break: break-all;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 335px;
        max-height: 335px;
        &::before {
            display: block;
        }
    }
    .center {
        text-align: center;
    }
    .message_type1 {
        color: red;
    }
    .message_type2 {
        color: #4598f9;
    }
</style>
